<template>
  <div class="back bg-cover w-full h-full">
    <div class="a">
      <h3 class="text-center text-[40px] text-orange-500 font-bold pt-5">Business Register</h3>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <div class=" text">
          <el-form-item prop="userName">
            <span>用户名：</span><input type="text" id="userName" v-model="ruleForm.userName">
          </el-form-item>
        </div>
        <div class=" text">
          <el-form-item prop="name">
            <span>姓名：</span><input type="text" id="name" v-model="ruleForm.name">
          </el-form-item>
        </div>
        <div class=" text">
          <el-form-item prop="phone">
            <span>手机号：</span>
            <input type="text" id="phone" v-model="ruleForm.phone">
          </el-form-item>
        </div>
        <div class=" text">
          <el-form-item prop="businessName">
            <span>店名：</span>
            <input type="text" id="businessName" v-model="ruleForm.businessName">
          </el-form-item>
        </div>
        <div class=" text">
          <el-form-item prop="businessAddress">
            <span>地址：</span>
            <input type="text" id="businessAddress" v-model="ruleForm.businessAddress">
          </el-form-item>
        </div>
        <div class=" text">
          <el-form-item prop="businessPhone">
            <span>店铺手机：</span>
            <input type="text" id="businessPhone" v-model="ruleForm.businessPhone">
          </el-form-item>
        </div>
        <div class="text">
          <el-form-item prop="password">
            <span>店铺密码：</span><input type="password" id="password" v-model="ruleForm.password">
          </el-form-item>
        </div>
        <div class="text">
          <el-form-item prop="password2">
            <span>确认密码：</span><input type="password" id="password2" v-model="ruleForm.password2">
          </el-form-item>
        </div>
        <div class="text2">
          <span>验证码：</span>
          <el-form-item prop="mes">
            <input type="text" class="v" v-model="ruleForm.mes">
          </el-form-item>
          <span id="txt">{{ verify }}</span>
          <a @click="Num">换一个</a>
        </div>
      </el-form>
      <div class="buttom">
        <button class="but" @click="sumb('ruleFormRef')">确定注册</button>
        <button @click="this.$router.push({ path: '/business/login' })">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    var validateCheckPass = ( rule, value, callback ) => {
      if ( value !== this.ruleForm.password ) {
        callback( new Error( "两次密码不一致" ) )
      } else {
        callback()
      }
    }

    var validateCheckMes = ( rule, value, callback ) => {
      if ( value !== this.verify ) {
        callback( new Error( "请输入正确的验证码" ) )
      } else {
        callback()
      }
    }
    return {
      verify: '',
      tip: false,
      ruleForm: [
        {
          userName: '',
          businessPhone: '',
          businessName: '',
          name: '',
          businessAddress: '',
          phone: '',
          password: '',
          password2: '',
          mes: '',
        }
      ],
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        businessAddress: [
          { required: true, message: '请输入店铺地址', trigger: 'blur' },
        ],
        businessPhone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "密码只能含有数字+字母",
            trigger: "blur"
          },
          { min: 6, max: 12, message: "长度为6-12位", trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validateCheckPass, trigger: 'blur' }
        ],
        mes: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { validator: validateCheckMes, trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    this.Num()
  },
  methods: {
    Num() {
      var num = '';
      for ( var i = 0; i < 5; i++ ) {
        num += Math.floor( Math.random() * 10 );  //范围是[0~9]
      }
      this.verify = num

    },

    sumb( fromName ) {
      this.$refs[ fromName ].validate( valid => {
        if ( valid ) {
          //如果通过验证 to do...
          axios( {
            url: 'http://127.0.0.1:8081/api/business/register',
            method: 'post',
            params: {
              userName: document.getElementById( 'userName' ).value,
              businessName: document.getElementById( 'businessName' ).value,
              name: document.getElementById( 'name' ).value,
              businessAddress: document.getElementById( 'businessAddress' ).value,
              businessPhone: document.getElementById( 'businessPhone' ).value,
              password: document.getElementById( 'password' ).value,
              phone: document.getElementById( 'phone' ).value,
            }
          } ).then( res => {
            if ( res.data.code === 20000 ) {
              this.$message.success( res.data.message );
              this.$router.push( { path: '/login' } );
            }
            else {
              this.$message.error( res.data.message );
            }
          } )
        }
      } )


    }

  }

}
</script>

<style scoped >
.back {
  background: url(../../../assets/img/login.png);
}



input {
  position: absolute;
  left: 140px;
}

.text2 .el-form-item {
  margin-top: -15px;
}

.v {
  width: 70px;
}


.text2 #txt {
  position: absolute;
  right: 80px;
  bottom: 105px;
  font-size: 23px;
  letter-spacing: 2px;
  color: coral;
}

span {
  position: relative;
  right: -42px;
}

.text2 {
  margin-top: 30px;
}

.text2 a {
  position: absolute;
  right: 25px;

  font-size: 14px;
}

.text2 a:hover {
  color: #39e7db;
  text-decoration: underline;
}

.but {
  margin-top: 40px;
}

.buttom button:last-of-type {
  font-size: 15px;
  position: absolute;
  right: 50px;
  bottom: 45px;
}

.buttom button:last-of-type:hover {
  text-decoration: underline;
  color: coral;
}
</style>

<style lang="less" scoped>
/deep/.el-form-item__error {
  padding-top: 0;
  left: 140px
}

.text2 /deep/.el-form-item__error {
  padding-top: 15px;
  left: 140px
}

.a {
  background-color: rgb(255, 255, 255);
  opacity: 0.7;
  /*阴影（正值，正X向右，正Y向下，颜色）*/
  box-shadow: 10px 25px 25px rgb(171, 171, 168);
  width: 400px;
  height: 680px;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  left: 600px;
}

h3 {
  text-align: center;
  font-size: 40px;
  padding-top: 20px;
  color: coral;
  font-weight: bold;
}

.but {
  border: 2px solid coral;
  padding: 6px 20px;
  border-radius: 10px;
  font-size: 15px;
}

.but:hover {
  background-color: coral;
  color: rgb(255, 255, 255);
}

span {
  color: #3b3b3b;
  font-size: 20px;
}

input {
  border: 2px solid #616161;
  border-radius: 5px;
  width: 200px;
  height: 30px;
}

.buttom {
  text-align: center;
}

.text {
  margin-top: 30px;
  text-align: center;
}
</style>
